import React, { useState, useRef, useEffect } from 'react';
import { Toast, NavBar, Button } from 'react-vant';
import { UserOutline, BankcardOutline, FaceRecognitionOutline, MailOutline,PhonebookOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
import { Footer } from 'antd-mobile'
import axios from 'axios';
import './css/face.css'
// import './css/faceLogin.scss'
function FaceLogin() {
    let navigate = useNavigate();
    useEffect(() => {
        startCamera();
    }, []);
    const email = () => {
        navigate('/email')
    }

    const face = () => {
        navigate('/face')
    }

    const register = () => {
        navigate('/register')
    }



    const videoRef = useRef(null);
    const canvasRef = useRef(null);
    const [capturedImages, setCapturedImages] = useState([]);
    const startCamera = async () => {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        videoRef.current.srcObject = stream;
    };
    const capture = () => {
        const canvas = canvasRef.current;
        const context = canvas.getContext('2d');
        context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
        const imageSrc = canvas.toDataURL('image/jpeg');

        setCapturedImages([...capturedImages, imageSrc])
        submitImages(imageSrc)
    };
    let submitImages = async (img) => {
        await axios.post('http://localhost:3000/faceLogin', { b64: img }).then(res => {
            console.log(res);
            if (res.data.code == 200) {
                // console.log(res);
                // sessionStorage.setItem('_id', res.data._id)
                // sessionStorage.setItem('token', res.data.token)
                Toast('登录成功')
                navigate('/home')
            } else {
                Toast(res.data.msg)
            }
        })
    };
    // 导航头回退
    let headgo = () => {
        Toast('返回上一页')
        navigate(-1)
    }
    return (
        <div id='faceLogin'>
            {/* 导航头 */}
            <div className='header'>
                <div id="headers">
                    <NavBar
                        title=""
                        leftText=""
                        onClickLeft={() => headgo()}
                        onClickRight={() => Toast('按钮')}
                    />
                </div>
            </div>
            <div id='login_content'>
                <div id='login_content1'>
                    <div id='login_content_inco'>
                        <div id='login_content_p'>票</div>
                    </div>
                </div>
                <div id='login_content2'>人脸识别登录</div>
            </div>
            <div id='faceLogin_video'>
                <video ref={videoRef} autoPlay />
            </div>
            <canvas ref={canvasRef} style={{ display: 'none' }} />
            <div id='button'>
                <Button color='linear-gradient(#ff6b62,#ff9365)' onClick={capture}>
                    登录
                </Button>
            </div>
            <div id='login_qh' style={{ marginTop: '20px' }} onClick={register}>未注册的用户将要去创建新账号</div>

            <div id='login_div1'>
                <Footer label='或通过一下方式登录'></Footer>
            </div>

            <div id='login_footer'>
                <div id='login_footers' onClick={face}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><PhonebookOutline /></div></div>
                <div id='login_footers' onClick={face}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><FaceRecognitionOutline /></div></div>
                <div id='login_footers' onClick={email}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><MailOutline /> </div></div>
            </div>

            <div id='login_out'>
                <div id='login_footer2'>登录或注册代表您同意<span style={{ color: '#ff7363' }}>用户服务协议</span></div>
            </div>
        </div>
    );
}

export default FaceLogin;


